<template>
    <div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="id" label="id" align="center">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="ext.score" label="赠送/扣除球币" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.ext.score<'0'">
                        <el-tag type="danger">扣除{{ scope.row.ext.score }}</el-tag>
                </div>
                <div v-else>
                    <el-tag type="success">赠送{{ scope.row.ext.score }}</el-tag>
                </div>
        </template>
            </el-table-column>
            <el-table-column prop="create_time" label="赠送/扣除时间" align="center">
            </el-table-column>
        </el-table>


        <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
    </div>
</template>

<script>
import { sendUserList } from '../../../libs/api'
export default {
    name: 'Dashboard',
    data() {
        return {
            dialogManagementVisible: false,
            dialogTableVisible: false,
            dialogVisible: false,
            // 总数据
            tableData: [],
            currentPage: 1,
            PageSize: 10,
            fileList:[],

            currentPage: 1,
            totalCount: 1,
            PageSize: 10,
            pageSizes: [5, 10],
            alltabData: [],
            orderTime:'',
            phoneNumber:'',
            userPhone:'',
            money:''

        }
    },
    created() {
        this.getUserList()
    },
    methods: {
        phoneNum(){
            this.getUserList()
        },
            // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val
      this.getUserList()
    },
     // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数 
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
      this.getUserList()
    },
        // 获取用户列表
        getUserList() {
            sendUserList({
                page: this.currentPage,
                limit: this.PageSize,
            }).then(res => {
                console.log(res)
                this.tableData = res.data.list
                this.alltabData = res.data.list
                this.totalCount = res.data.total
            })
        },
    }
}
</script>

<style>
.tab {
    display: flex;
    align-items: center;
    margin: 30px 30px;
}

.tabSearch {
    display: flex;
}

.addBtn {
    margin-left: 30px;
    margin-bottom: 30px;
}
.ql-editor {

height: 300px;

}
</style>